<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
		<meta name="format-detection" content="telphone=no" />
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/my1.js" type="text/javascript" charset="utf-8"></script>
		
		<link rel="stylesheet" type="text/css" href="css/select_three.css"/>
	</head>
	<body>
		<div style="text-align: center;padding: 1rem 0 0 0;font-size: 0.4rem;">无限级选择下拉</div>
		<input type="text" readonly="readonly" id="button" class="button" placeholder="请选择" />
		
		<script src="js/better_scroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/select_three.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var data=[
				{
					id:1,
					title:"没看到",
					child:[
						{
							id:11,
							title:"1_1",
							child:[]
						}
					]
				},
				{
					id:2,
					title:"热擦擦",
					child:[
						{
							id:21,
							title:"2_1",
							child:[
								{
									id:211,
									title:"2_1_1",
									child:[
										{
											id:2111,
											title:"2_1_1_1",
											child:[]
										}
									]
								}
							]
						},
						{
							id:22,
							title:"2_2",
							child:[
								{
									id:221,
									title:"2_2_1",
									child:[]
								}
							]
						}
					]
				},
				{
					id:3,
					title:"jsjdjsdfjsdkfsknalkdnklasniwjreom;lfkglajfksadfnknfnfomkasfjas",
					child:[
						{
							id:31,
							title:"3_1",
							child:[
								{
									id:311,
									title:"3_1_1",
									child:[
										{
											id:3111,
											title:"3_1_1_1",
											child:[
												{
													id:31111,
													title:"3_1_1_1_1",
													child:[
														{
															id:311111,
															title:"3_1_1_1_1_1",
															child:[
																{
																	id:3111111,
																	title:"3_1_1_1_1_1_1",
																	child:[
																		{
																			id:31111111,
																			title:"3_1_1_1_1_1_1_1",
																			child:[
																				{
																					id:311111111,
																					title:"3_1_1_1_1_1_1_1_1",
																					child:[]
																				}
																			]
																		}
																	]
																}
															]
														}
													]
												}
											]
										}
									]
								}
							]
						},
						{
							id:32,
							title:"3_2",
							child:[
								{
									id:321,
									title:"3_2_1",
									child:[]
								}
							]
						}
					]
				},
				{
					id:4,
					title:"那个号",
					child:[
						{
							id:41,
							title:"4_1",
							child:[]
						}
					]
				},
				{
					id:5,
					title:"让她很反感",
					child:[]
				},
				{
					id:6,
					title:"持续到",
					child:[]
				},
				{
					id:7,
					title:"同意后",
					child:[
						{
							id:71,
							title:"7_1",
							child:[]
						},
					]
				},
				{
					id:8,
					title:"挂号费改",
					child:[]
				},
				{
					id:9,
					title:"不发生",
					child:[
						{
							id:91,
							title:"9_1",
							child:[]
						},
					]
				},
				{
					id:10,
					title:"案件十大",
					child:[]
				}
			]
			
			var num = new Star({
				id:"button",
				wheels:data,//数据列表
				default:"",//默认数据(自动选中的)[default代表数据的id]，联动数据的话id是以'_'符号分割，格式：2_22_221【2:第一级ID  22:第二级ID  221:第三级ID】
				callback:function(data){
					console.log(data)
					$("#button").val(data.value)
					$("#button").data("id",data.id)
				}
			})
		</script>
	</body>
</html>
